<template>
	<view>
		<view style="border: 1px solid #eeeeee;border-radius: 5px;">
			<table class="gt-table" align="center">
				<thead>
					<tr>
						<td v-if="template.batch" width="50">
							<checkbox :checked="selectAllCheckbox" @click="selectParentCheckBox"></checkbox>
						</td>
						<td v-for="(column,key) in template.table.columns" :key="key">{{column.label}}</td>
					</tr>
				</thead>
				
				<tbody v-if="!template || !template.list || template.list.length ==0 ">
					<tr class="gt-table-tr">
						<td :colspan="template.table.columns && template.table.columns.length + 1">
							<view class="t-center c-secondary pd-15">
								{{ $t('无数据') }}
							</view>
						</td>
					</tr>
				</tbody>
				<tbody v-else v-for="(row,rowIndex) in template.list" :key="rowIndex">
					<tr class="gt-table-tr">
						<td v-if="template.batch">
							<checkbox
								:checked="batchSelectIndexList && batchSelectIndexList.indexOf(rowIndex)==-1 ? false : true "
								@click="selectCheckBox(rowIndex)"></checkbox>
						</td>
						<td v-for="(column,columnIndex) in template.table.columns" :key="columnIndex">
							<slot :name="column.field" :data="{row,column,rowIndex,columnIndex}">
								<!-- 自定义 -->
								<view v-if="column.type == 'custom'">
									<slot name="tableColumn" :row="row" :column="column" :rowIndex="rowIndex"></slot>
								</view>
								<!-- 操作 -->
								<view v-else-if="column.type == 'handle'" class="row">
									<view v-for="(item,index) in column.child" :key="index" v-if="handleIsShow(item,row)"  :style="column.style || ''">
										<view v-if="item.type == 'popup'" :class="item.class" :style="item.style" @click="btnClick(item,row)">
											{{item.label}}
										</view>
										<view v-else-if="item.type == 'urlPost'" :class="item.class" :style="item.style" @click="urlPost(item,row)">
											{{item.label}}
										</view>
										<view v-else class="btn btn-disabled  mr-15">{{item.label}}</view>
									</view>
								</view>
								<!-- 时间 -->
								<view v-else-if="column.type == 'date'">
									{{ $tools.timeToDate(row[column.field],'Y-M-D ')  }}
								</view>
								<!-- 时间-秒 -->
								<view v-else-if="column.type == 'datetime'">
									{{ $tools.timeToDate(row[column.field],'Y-M-D h:m:s')  }}
								</view>
								<!-- 图片 -->
								<view v-else-if="column.type == 'img' && row[column.field] != ''" class="row pointer"
									@click="$fun.showImgs(row[column.field].split(','))">
									<image :class="column.size?column.size:'w-h-30'" class=" border-radius"
										:src="row[column.field]"></image>
								</view>
								<!-- 匹配 -->
								<view :class="column.class || ''"
									v-else-if="column.type == 'select' && template.selectList && template.selectList[column.field]">
									{{ $tools.getListVal(template.selectList[column.field],row[column.field])}}
								</view>
								<!-- 复制文字 -->
								<view v-else-if="column.type == 'copy'">
									<text class="pointer" @click="$tools.copy(row[column.field])">
										<text class="mr-5">{{row[column.field]}}</text>
										<text class="iconfont icon-copy"></text>
									</text>
								</view>
								<!-- 按钮 -->
								<view v-else-if="column.type == 'btn'">
									<view class="row" v-for="(btnItems,btnKey) in column.btnList" :key="btnKey"
										v-if=" template.table.status == btnItems.status">
										<view v-for="(btn,btnIndex) in btnItems.list" :key="btnIndex">
											<gt-btn v-if="btn.url" :name="btn.name" :iconClass="btn.iconClass"
												:class="btn.class" :postUrl="btn.url(row)" :confirmText="'您确认此操作？'"
												@callBack="rowCallBack">
											</gt-btn>
											<view v-else @click="update(btn.label,row)">
												<gt-btn :name="btn.name" :iconClass="btn.iconClass" :class="btn.class">
												</gt-btn>
											</view>
										</view>
									</view>
								</view>
								<!-- 自定义Value -->
								<view v-else-if="column.value">
									{{column.value(row[column.field],row,rowIndex)}}
								</view>
								<!-- 自定义Value -->
								<view v-else-if="column.html" v-html="column.html(row[column.field],row,template.selectList[column.field],rowIndex)"></view>
								<!-- 文字 -->
								<view v-else>
									<text class="pointer" @click="$tools.copy(row[column.field])">
										<text class="mr-5">{{row[column.field]}}</text>
									</text>
								</view>
							</slot>
						</td>
					</tr>
					<slot name="tableChild" :row="row" :rowIndex="rowIndex"></slot>
				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-table-list",
		model: {
			prop: 'template',
			event: 'change'
		},
		props: {
			template: {}
		},
		data() {
			return {
				searchForm: {},
				batchSelectIndexList: [],
			}
		},
		created() {},
		computed: {
			selectAllCheckbox() {
				if (this.template.table.list && this.template.table.list.length != 0 && this.batchSelectIndexList && this
					.batchSelectIndexList.length > 0 && this
					.batchSelectIndexList
					.length == this.template.table.list.length) {
					return true;
				}
				return false;
			}
		},
		watch: {
			template(newData) {
				// console.log(newData);
			}
		},
		methods: {
			handleIsShow(item,row){
				if(item.isShow && typeof item.isShow == 'function' ){
					return item.isShow(row);
				}
				return true;
			},
			urlPost(item,row){
				let postData = {};
				if(!item.url){
					console.log('postUrl未配置',item)
					return;
				}
				let url = item.url;
				for(let i in item.urlParams){
					let field = item.urlParams[i];
					if(row[field]){
						url += url.indexOf('?') === -1 ? `?` : `&`;
						url += field + '=' + row[field];
					}
				}
				let _this = this;
				uni.showModal({
					title: '警告',
					content: this.confirmText || '确认此操作',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.$post({
								url: url,
								data: postData,
								afterFun(r) {
									if(r.msg){
										_this.$emit('clickBack')
									}
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			btnClick(a,b){
				// let temp = this.template;
				// temp['searchFormData'] = e.data;
				// this.$emit('change',temp)
				this.$emit('clickBack',a,b)
			},
			selectCheckBox(index) {
				let key = this.batchSelectIndexList.indexOf(index);
				if (key == -1) {
					this.batchSelectIndexList.push(index);
				} else {
					this.batchSelectIndexList.splice(key, 1);
				}
				let temp = this.template;
				temp['batchSelectIndexList'] = this.batchSelectIndexList;
				this.$emit('change', temp)
			},
			selectParentCheckBox() {
				let template = this.template;
				if (template.list.length != 0 && this.batchSelectIndexList.length == template.list.length) {
					//取消
					this.batchSelectIndexList = [];
				} else {
					//选中
					let list = [];
					for (let i in template.list) {
						list.push(parseInt(i));
					}
					this.batchSelectIndexList = [];
					this.batchSelectIndexList = list;
				}
				let temp = this.template;
				temp['batchSelectIndexList'] = this.batchSelectIndexList;
				this.$emit('change', temp)
			},
			rowCallBack(e) {
				if (e.msg) {
					this.batchSelectIndexList = []
					this.$emit('rowCallBack')
				}
			},
			update(label, row) {
				let obj = {
					label: label,
					row: row
				}
				this.$emit('update', obj)
			}
		}
	}
</script>

<style>
	.gt-popup-close {
		width: 24px;
		height: 24px;
		position: absolute;
		right: 15px;
		top: 15px;
		text-align: center;
		cursor: pointer;
	}


	.popup-title {
		line-height: 40px;
		font-size: 22px;
		padding: 10px 20px;
		border-bottom: 1px solid #eeeeee;
	}

	.gt-table-list-container {
		padding: 0 30px 30px 30px;
	}

	.gt-table {
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 14px;
		color: #606266;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		border-collapse: collapse;
		border-spacing: 16px;
		color: #606266;
		text-align: left;
	}

	/* 线状网格 */
	.gt-table-line td {
		// border-top: none !important;
		// border-right: none !important;
		// border-left: none !important;
	}

	.gt-table thead {
		font-weight: 900;
		color: #858585;
	}

	.gt-table-tr:hover {
		background-color: #f9f9f9;
	}

	.gt-table tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}

	.gt-table td {
		padding: 12px 15px;
	}

	.gt-table tbody td {
		border-top: 1px solid #eeeeee;
	}

	.showTrChild,
	.showTrChild td,
	.showTrChild .td-content {
		min-height: 50px;
		animation: showTr .3s;
	}

	@keyframes showTr {
		form: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}

		to: {
			min-height: 50px;
			background-color: aqua;
		}
	}

	.hideTrChild,
	.hideTrChild td,
	.hideTrChild .td-content {
		height: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border-top: none !important;
		animation: hideTr .3s;
	}

	@keyframes hideTr {
		form: {
			min-height: 100px;
		}

		to: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}
	}

	button {
		border: none;
	}

	.page--active {
		background-color: black;
	}

	.page-limit {
		width: 80px;
		height: 28px;
	}
</style>
